import './index.scss'
import { Col, Row } from "antd";
import ChargeIcon from "@/assets/icons/charge-icon.png";

import baoshi from '@/assets/icons/baoshi.png'
import jiantou from '@/assets/icons/jiantou.png'

const PersonData = () => {
    return (
        <div className="person-part">
            <Row>
                <Col span={12}>
                    <div className='leftName'>
                        <div className='leftName_Title'>主账户</div>
                        <div className='leftName_Top'>
                            <div className='leftName_Image'>
                                <img src={baoshi} className='leftName_Baoshi' />
                                <img src={jiantou} className='leftName_Jiantou' />
                            </div>
                            VIP
                        </div>
                    </div>
                    <div className='mailbox'>adf123@gmail.com</div>
                    <div className='balanceTitle'>可用余额</div>
                    <div className='balance_amount'> 50000.00 USD </div>
                </Col>
                <Col span={12}>
                    <div className='personal_data'>个人数据</div>
                    <Row className='dataTable' gutter={[0, 40]}>
                        <Col xs={24} sm={24} md={24} lg={24} xl={12}>
                            <div className="charge-container">
                                <div className='charg-image-box'>
                                    <img src={ChargeIcon} className="charge-image" alt="" />
                                </div>
                                <div className="charge-info">
                                    <span className='money'>0.000$</span>
                                    <span className='moneyTitle'>交易总量</span>
                                </div>
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={24} lg={24} xl={12}>
                            <div className="charge-container">
                                <div className='charg-image-box'>
                                    <img src={ChargeIcon} className="charge-image" alt="" />
                                </div>
                                <div className="charge-info">
                                    <span className='money'>0.000$</span>
                                    <span className='moneyTitle'>BOT奖励</span>
                                </div>
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={24} lg={24} xl={12}>
                            <div className="charge-container">
                                <div className='charg-image-box'>
                                    <img src={ChargeIcon} className="charge-image" alt="" />
                                </div>
                                <div className="charge-info">
                                    <span className='money'>0.000$</span>
                                    <span className='moneyTitle'>日/分红点</span>
                                </div>
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={24} lg={24} xl={12}>
                            <div className="charge-container">
                                <div className='charg-image-box'>
                                    <img src={ChargeIcon} className="charge-image" alt="" />
                                </div>
                                <div className="charge-info">
                                    <span className='money'>0.000$</span>
                                    <span className='moneyTitle'>日/分红奖励</span>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    );
};

export default PersonData;
